<template>
  <div class="admin-layout">
    <!-- 侧边栏：管理后台的导航菜单区域 -->
    <aside class="admin-sidebar" :class="{ collapsed: isCollapsed }">
      <!-- 侧边栏头部：包含logo和折叠按钮 -->
      <div class="sidebar-header">
        <h2 class="logo">博客管理</h2>
        <!-- 折叠按钮：控制侧边栏的展开/收起状态 -->
        <button class="collapse-btn" @click="toggleCollapse">
          <el-icon>
            <ArrowLeft />
          </el-icon>
        </button>
      </div>

      <!-- 侧边栏导航：管理后台的主要功能菜单 -->
      <nav class="sidebar-nav">
        <!-- 导航菜单项：根据menuItems配置动态生成 -->
        <router-link v-for="item in menuItems" :key="item.path" :to="item.path" class="nav-item"
          :class="{ active: $route.path === item.path }">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span class="nav-text">{{ item.title }}</span>
        </router-link>
      </nav>
    </aside>

    <!-- 主内容区域：管理后台的主要内容展示区域 -->
    <main class="admin-main">
      <!-- 顶部导航栏：显示当前页面标题和用户信息 -->
      <header class="admin-header">
        <!-- 左侧：当前页面标题 -->
        <div class="header-left">
          <h1 class="page-title">{{ currentPageTitle }}</h1>
        </div>
        <!-- 右侧：用户信息下拉菜单 -->
        <div class="header-right">
          <el-dropdown>
            <!-- 用户信息显示：头像和用户名 -->
            <span class="user-info">
              <el-avatar :size="32" src="/src/assets/pic/avatar.jpg" />
              <span class="username">{{ adminUser?.username || '管理员' }}</span>
            </span>
            <!-- 用户下拉菜单：提供退出登录功能 -->
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 内容区域：路由视图，显示具体的页面内容 -->
      <div class="admin-content">
        <router-view v-slot="{ Component, route }">
          <transition name="admin-page" mode="out-in">
            <component :is="Component" :key="route.fullPath" class="admin-page-component" />
          </transition>
        </router-view>
      </div>

      <!-- 管理后台页脚：显示版权信息等 -->
      <AdminFooter />
    </main>
  </div>
</template>

<script setup lang="ts">
/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理和计算属性
 */
import { ref, computed } from 'vue'

/**
 * 导入Vue Router
 * @description 用于路由导航和获取当前路由信息
 */
import { useRoute, useRouter } from 'vue-router'

/**
 * 导入Element Plus消息提示组件
 * @description 用于显示操作反馈信息
 */
import { ElMessage } from 'element-plus'

/**
 * 导入Element Plus图标组件
 * @description 用于界面图标显示
 */
import {
  ArrowLeft,      // 左箭头图标，用于折叠按钮
  Document,       // 文档图标，用于博客管理
  Folder,         // 文件夹图标，用于分类管理
  Collection,     // 集合图标，用于标签管理
  Link,           // 链接图标，用于友链管理
  ChatDotRound,   // 聊天图标，用于评论管理
  Setting,        // 设置图标，用于仪表盘
  DataAnalysis    // 数据分析图标，用于缓存管理
} from '@element-plus/icons-vue'

/**
 * 导入认证工具函数
 * @description 用于管理员登录状态管理和用户信息获取
 */
import { adminLogout, getAdminUser } from '@/utils/auth'

/**
 * 导入管理后台页脚组件
 * @description 显示管理后台的页脚信息
 */
import AdminFooter from './AdminFooter.vue'

/**
 * 获取当前路由实例
 * @description 用于获取当前路由路径和参数
 */
const route = useRoute()

/**
 * 获取路由导航实例
 * @description 用于程序化路由跳转
 */
const router = useRouter()

/**
 * 侧边栏折叠状态
 * @description 控制侧边栏的展开/收起状态，true为折叠，false为展开
 */
const isCollapsed = ref(false)

/**
 * 菜单项配置数组
 * @description 定义管理后台的主要功能菜单，包含路径、标题和图标
 */
const menuItems = [
  { path: '/admin/dashboard', title: '仪表盘', icon: 'Setting' },           // 仪表盘页面
  { path: '/admin/posts', title: '博客管理', icon: 'Document' },  // 博客文章管理
  { path: '/admin/categories', title: '分类管理', icon: 'Folder' }, // 分类管理
  { path: '/admin/tags', title: '标签管理', icon: 'Collection' },  // 标签管理
  { path: '/admin/friends', title: '友链管理', icon: 'Link' },     // 友链管理
  { path: '/admin/comments', title: '评论管理', icon: 'ChatDotRound' }, // 评论管理
  { path: '/admin/cache', title: '缓存管理', icon: 'DataAnalysis' }, // 缓存管理
  { path: '/admin/settings', title: '系统设置', icon: 'Setting' } // 系统设置
]

/**
 * 当前页面标题计算属性
 * @description 根据当前路由路径动态计算页面标题
 * @returns {string} 当前页面的标题
 */
const currentPageTitle = computed(() => {
  const currentItem = menuItems.find(item => item.path === route.path)
  return currentItem?.title || '博客管理'
})

/**
 * 切换侧边栏折叠状态
 * @description 控制侧边栏的展开/收起，提升用户体验
 */
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

/**
 * 管理员用户信息计算属性
 * @description 获取当前登录的管理员用户信息
 * @returns {Object|null} 管理员用户信息对象或null
 */
const adminUser = computed(() => getAdminUser())

/**
 * 退出登录处理函数
 * @description 清除管理员登录状态并跳转到登录页面
 */
const logout = async () => {
  adminLogout()
  ElMessage.success('已退出登录')

  // 确保登录状态已清除
  await new Promise(resolve => setTimeout(resolve, 200))

  // 使用window.location强制刷新页面
  window.location.href = '/admin/login'
}
</script>

<style scoped lang="scss">
// 导入管理后台布局样式
@use '../assets/styles/components/_layout';
</style>